<template>
  <div>
    <div class="mb-10px flex justify-between">
      <InputSearch
        class="search_right"
        v-model:value="roleName"
        placeholder="请输入角色名称"
        enter-button
        @search="onSearch"
        style="width: 240px"
      ></InputSearch>

      <Button v-per="'add'" type="primary" class="addButton" @click="handleCreate">增加</Button>
    </div>
    <div class="coneten">
      <Table
        bordered
        :dataSource="roleList"
        :columns="columns"
        :pagination="false"
        class="main-table"
        :loading="loading"
        :scroll="scroll"
      >
        <template #bodyCell="{ column, record }">
          <template v-if="column.key === 'status'">
            <span v-if="record.status"> 启用 </span>
            <span v-else> 停用 </span>
          </template>
          <template v-if="column.key === 'isBuiltIn'">
            <span v-if="record.isBuiltIn"> 是 </span>
            <span v-else> 否 </span>
          </template>
        </template>
        <template #action="{ record }">
          <span v-per="'detail'">
            <a @click="onDetail(record)"><ExclamationCircleOutlined /></a>
          </span>
          <Divider type="vertical" />
          <span v-per="'update'">
            <a @click="onEdit(record)"><EditOutlined /></a>
          </span>
          <Divider type="vertical" />
          <span v-per="'delete'">
            <Popconfirm okText="确认" cancelText="取消" title="是否确认删除?" @confirm="onDelete(record.id)">
              <a v-show="!record.isBuiltIn"><DeleteOutlined /></a>
            </Popconfirm>
          </span>
        </template>
      </Table>
      <br />
      <Pagination
        v-model:current="page.current"
        :page-size-options="page.pageSizeOptions"
        :total="page.total"
        :show-total="(total) => `共 ${page.total} 条`"
        show-size-changer
        :page-size="page.pageSize"
        @showSizeChange="onShowSizeChange"
        @change="changeCurrent"
      >
      </Pagination>
      <Form :visible="modelVisible" :type="modelType" :data="selectData" @close="handleSuccess"></Form>
      <Detail ref="detailRef" :visible="modelDetailVisible" :data="selectData" @close="handleDetailClose"></Detail>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { Table, Popconfirm, message, Button, Divider, Pagination, InputSearch } from 'ant-design-vue';
import { ExclamationCircleOutlined, EditOutlined, DeleteOutlined } from '@ant-design/icons-vue';
import { columns, Page } from './role.data';
import { deleteSaaSRole, getSaaSRoleListByPage } from '/@/api/authority-mgmt/role';
import { SaaSRoleListItem } from '/@/api/authority-mgmt/model/roleModel';
import Form from './component/form.vue';
import Detail from './component/detail.vue';

const scroll = ref<undefined | object>(undefined);
const loading = ref(true);
const page = ref<Page>({
  current: 1,
  pageSizeOptions: ['10', '20', '30', '40', '50'],
  total: 0,
  pageSize: 10,
});
const roleList = ref<SaaSRoleListItem[]>([]);

async function reload(_params: any) {
  let params = {
    ..._params,
    current: page.value.current,
    size: page.value.pageSize,
  };
  try {
    let res = await getSaaSRoleListByPage(params);
    if (res) {
      page.value.total = res.total;
      roleList.value = res.items;
    }
  } finally {
    loading.value = false;
  }
}

const roleName = ref('');

function reloadTable() {
  if (roleName.value) {
    let model = { roleName: roleName.value };
    reload(model);
  } else {
    reload({});
  }
}

reloadTable();
const onShowSizeChange = (current: number, pageSize: number) => {
  page.value.current = 1;
  page.value.pageSize = pageSize;
  if (pageSize > 10) {
    scroll.value = { y: 500 };
  }
  reloadTable();
};
const changeCurrent = (current: number) => {
  page.value.current = current;
  reloadTable();
};
// 编辑 新增
const modelType = ref();
// 选择行
const selectData = ref({});
// 组件状态
let modelVisible = ref(false);

function openModel() {
  modelVisible.value = true;
}

let modelDetailVisible = ref(false);
const detailRef = ref();
const onDetail = (user: any) => {
  detailRef.value.getAppName(user.appName);
  selectData.value = user;
  modelDetailVisible.value = true;
};
const handleCreate = () => {
  modelType.value = 1;
  openModel();
};
const onEdit = (user: any) => {
  selectData.value = user;
  modelType.value = 2;
  openModel();
};

async function handleDelete(key: string) {
  const res = await deleteSaaSRole(key);
  if (res) {
    message.success('删除角色成功！');
  } else {
    message.error('删除角色失败！');
  }
  reloadTable();
}

function onSearch() {
  reloadTable();
}

const onDelete = (key: string) => {
  handleDelete(key);
};

function closeModel() {
  modelVisible.value = false;
}

const handleSuccess = (val: string) => {
  closeModel();
  if (val && val === 'success') {
    reloadTable();
  }
};
const handleDetailClose = () => {
  modelDetailVisible.value = false;
};
</script>
<style lang="less">
.ant-pagination {
  float: right;
}

.header {
  width: 100%;
  height: 70px;

  .search_left {
    width: 70px;
    float: left;
  }

  .search_right {
    float: left;
    width: 500px;
  }
}

.title {
  height: 20px;

  .addButton {
    // width: 70px;
    float: right;
  }

  .title_name {
    float: left;
  }
}

.table {
  width: 100%;
  min-height: 500px;
}
</style>
